Customisation
Intro
Fortunately we have several options available in Shiny that can change the appear ance of your app. For example:
-
HTML/CSS
-
Shiny Themes
-
Javascript
Today we’re only going to cover the first two options.
HTML/CSS
The following section aims to show you how HTML and CSS are used in Shiny and how you can use it without having to become a full-blown website developer.
The following RStudio site describes the use of the HTML tags quite well. So if you want to use the tags in your app today, please check it out.
You can add custom CSS to your app by creating a www/ subdirectory to your app and adding a CSS file there. Suppose, for example, you want to change the title font of your dashboard to the same font as the rest of the dashboard, so that it looks like this:
To do this, first create a file named www/custom.css with the following:
.main-header .logo {
font-family: "Georgia", Times, "Times New Roman", serif;
font-weight: bold;
font-size: 16px;
}Then refer to that CSS file from the UI of your app:
## ui.R ##
dashboardPage(
dashboardHeader(title = "Custom font"),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
)
)
)Resources
color Picker
This site allows you to upload images and pick the color of the part of the image that you wish to reproduce. This is helpful if you want to use the color of a particular client’s logo but don’t know how to match it exactly. This site will provide the exact hex # for the color.coolo
Coolors
Want to create a palette of colors to ensure your app is consistent, professional and looks good? This website allows you to choose a color and will provide a palettes that go with your color.
Shiny Themes
This package allows you to apply a set theme to your app which can improve the look of your app very quickly! Please note - you will be limited to the themes included in the package.
Google Fonts API
Want to include interesting fonts that are not built into your machine? The google fonts api has hundreds of free fonts that you can include in your app with very little coding and no downloads!
Canva
A powerful graphic design tool with a free and paid option. This is very easy to use and requires no real graphic design knowledge. They also provide dozens of templates, photos, graphic elements and more. So if you’d like to add some custom images, slides or even create your own logo - check out Canva.
w3schools
Recommended for reference material on CSS styling (and HTML and other useful web related syntax). A lot of their descriptions include interactive examples that you can manipulate yourself to really understand how something works. Also check out the following app: HTML and Text
Awesome Design Tools
This site is well regarded curated list of top design and graphic tools that may assist you in the design of your app. So if you can’t find it elsewhere, look here.
Checkpoint 8
